<template>
    <canvas id="canvas"></canvas>
</template>



<script setup lang="ts">
  import {onMounted} from "vue";
  import RenderContext from "@/views/cg/lib/RenderContext.ts";
  import {Model, shape, matrix } from '../lib'
  onMounted(()=>{

    let gl = RenderContext.getGL()
    let program = RenderContext.getProgram()

    const mesh = shape.d3_cube()
    const model = new Model(mesh)

    const mPerspect = matrix.perspective(
      Math.PI*0.6, gl.canvas.width/gl.canvas.height, 0, 100.0
    )

    let angle = 0.0
    model.setMatrixUniform('u_project', mPerspect)
    function draw() {
      const rotateYMatrix = matrix.rotateY(angle)
      const rotateZMatrix = matrix.rotateZ(angle)
      console.log('rotateYMatrix',rotateYMatrix)
      console.log('rotateZMatrix',rotateZMatrix)
      model.setMatrixUniform('u_rotatey', rotateYMatrix)
      model.setMatrixUniform('u_rotatez', rotateZMatrix)
      model.draw()
      angle += 0.01
      requestAnimationFrame(draw)
    }
    draw()
  })
</script>

<style scoped lang="scss">
#canvas{
  width: 100%;
  height: 100%;
  display: block;
}
</style>
